<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

<head th:replace="public/index :: CSS(~{::title})">
    <title>Godz神•张涛</title>
</head>

<body id="page-top">
<!--导航栏-->
<nav th:insert="~{public/index :: indexHead}"></nav>
<!-- 主页 -->
<div id="home" class="intro route bg-image" style="background-image: url(/assets/myIndex/img/intro-bg.jpg)">
    <div class="overlay-itro"></div>
    <div class="intro-content display-table">
        <div class="table-cell">
            <div class="container">
                <p class="display-6 color-d">欢迎您的访问</p>
                <h1 class="intro-title mb-4">Godz神•张涛 </h1>
                <p class="intro-subtitle">
                    <!-- Js想显示的文字需要以,隔开 -->
                    <span class="text-slider-items">
                        [[${tws}]]
                    </span>
                    <!-- JS显示动画 -->
                    <strong class="text-slider"></strong>
                </p>
            </div>
        </div>
    </div>
</div>
<!-- 个人介绍 -->
<section id="about" class="about-mf sect-pt4 route">
    <div class="container">
        <div class="row">
            <div class="col-sm-14">
                <div class="box-shadow-full">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="row">
                                <div class="col-sm-6 col-md-5">
                                    <div class="about-img">
                                        <img src="/assets/myIndex/img/testimonial-2.jpg"
                                             class="img-fluid rounded b-shadow-a"  alt=""/>
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-7">
                                    <div class="about-info">
                                        <div>
                                            <span class="title-s">姓名: </span>
                                            <span th:text="${Pis.getPiName()}"></span>
                                        </div>
                                        <div>
                                            <span class="title-s">出生日期: </span>
                                            <span>2000年2月26日</span>
                                        </div>
                                        <div>
                                            <span class="title-s">专业方向: </span>
                                            <span th:text="${Pis.getPiPd()}"></span>
                                        </div>
                                        <div>
                                            <span class="title-s">喜爱的食物: </span>
                                            <span>蛋炒饭,烧烤,香锅等</span>
                                        </div>
                                        <div>
                                            <span class="title-s">讨厌的食物: </span>
                                            <span>西红柿炒鸡蛋,洋葱,大白菜,花菜.糊糊的土豆咖喱</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <hr>
                            </div>
                            <div class="skill-mf">
                                <span>网站开发-前端技术(爱好做特效网站)</span>
                                <span class="pull-right">70%</span>
                                <div class="progress">
                                    <div class="progress-bar"
                                         style="width: 70%;"
                                    >
                                    </div>
                                </div>
                                <span>网站开发-Java后端</span>
                                <span class="pull-right">70%</span>
                                <div class="progress">
                                    <div class="progress-bar"
                                         style="width: 70%"
                                    >

                                    </div>
                                </div>
                                <span>平面设计等</span>
                                <span class="pull-right">70%</span>
                                <div class="progress">
                                    <div class="progress-bar"
                                         style="width: 70%"
                                         >
                                    </div>
                                </div>
                            </div>
                            <p class="pt-3">
                                <a class="btn btn-primary btn js-scroll px-4"
                                   style="display: inline;"
                                   href="/index3"
                                   role="button">
                                    了解详情
                                </a>
                            </p>
                        </div>
                        <div class="col-md-6">
                            <div class="about-me pt-4 pt-md-0">
                                <div class="title-box-2">
                                    <h5 class="title-left">
                                        简要说明
                                    </h5>
                                </div>
                                <p class="lead">
                                    ——[[${Pis.getPiSiFirst()}]]
                                </p>
                                <p class="lead">
                                    ——[[${Pis.getPiSiSecond()}]]
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- 近期热点 -->
<section id="blog" class="blog-mf sect-pt4 route">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="title-box text-center">
                    <h3 class="title-a">
                        Godz的日记
                    </h3>
                    <p class="subtitle-a">
                        我最近发生的热点事件
                    </p>
                    <div class="line-mf"></div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4 bottom10" th:each="mystory:${Story3}">
                <div class="card card-blog">
                    <div class="card-img">
                        <a th:href="'/myStory?id='+${mystory.getId()}">
                            <img th:src="${mystory.getStoryImg1()}"
                                 class="img-item"  src="" alt=""/>
                        </a>
                    </div>
                    <div class="card-body">
                        <div class="card-category-box">
                            <div class="card-category">
                                <h6 class="category" th:text="${mystory.getStorySite()}"></h6>
                            </div>
                        </div>
                        <h3 class="card-title">
                            <a th:href="'/myStory?id='+${mystory.getId()}"
                               th:text="${mystory.getStoryTitle()}">
                            </a>
                        </h3>
                        <p class="card-description textgodz" th:text="${mystory.getStoryFirst()}"></p>
                    </div>
                    <div class="card-footer">
                        <div class="post-author">
                            <a th:href="'/myStory?id='+${mystory.getId()}">
                                <span class="author">了解详情</span>
                            </a>
                        </div>
                        <div class="post-date">
                            <span class="ion-ios-clock-outline"></span>
                            <text th:text="${#dates.format(mystory.getStoryDate(), 'yyyy-MM-dd')}"></text>
                        </div>
                    </div>
                </div>
            </div>
            <a href="/myStoryList" class="btnReturn" style="width: 100%;">了解更多</a>
        </div>
    </div>
</section>
<!-- 经验/获奖次数 -->
<div class="section-counter paralax-mf bg-image" style="background-image: url(/assets/myIndex/img/counters-bg.jpg)">
    <div class="overlay-mf"></div>
    <div class="container">
        <div class="row">
            <div class="col-sm-3 col-lg-4">
                <div class="counter-box">
                    <div class="counter-ico">
                        <span class="ico-circle"><i class="ion-checkmark-round"></i></span>
                    </div>
                    <div class="counter-num">
                        <p class="counter">10</p>
                        <span class="counter-text">个/项目经验</span>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-lg-4">
                <div class="counter-box pt-4 pt-md-0">
                    <div class="counter-ico">
                        <span class="ico-circle"><i class="ion-ios-calendar-outline"></i></span>
                    </div>
                    <div class="counter-num">
                        <p class="counter">3</p>
                        <span class="counter-text">年/工作经验</span>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-lg-4">
                <div class="counter-box pt-4 pt-md-0">
                    <div class="counter-ico">
                        <span class="ico-circle"><i class="ion-ribbon-a"></i></span>
                    </div>
                    <div class="counter-num">
                        <p class="counter">30</p>
                        <span class="counter-text">获奖次数</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 主要成果 -->
<section id="work" class="portfolio-mf sect-pt4 route">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="title-box text-center">
                    <h3 class="title-a">
                        主要成果
                    </h3>
                    <p class="subtitle-a">
                        Godz的战斗力还是很不错的
                    </p>
                    <div class="line-mf"></div>
                </div>
            </div>
            <div class="col-md-4" th:each="hpList:${HpList}">
                <div class="work-box">
                    <a th:href="${hpList.getHpImg1()}" data-lightbox="gallery-mf">
                        <div class="work-img">
                            <img th:src="${hpList.getHpImg1()}" alt="" class="img-item"  src=""/>
                        </div>
                        <div class="work-content">
                            <div class="row">
                                <div class="col-sm-12">
                                    <h2 class="w-title" th:text="${hpList.getHpTitle()}"></h2>
                                    <div class="w-more">
                                        <span class="w-ctegory" th:text="${hpList.getHpUnit()}"></span>
                                        /
                                        <span class="w-date" th:text="${hpList.getHpDate()}"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <a href="/index2#portfolio" class="btnReturn" style="width: 100%;">了解更多</a>
    </div>
</section>
<!-- 成果名言 -->
<div class="testimonials paralax-mf bg-image" style="background-image: url(/assets/myIndex/img/overlay-bg.jpg)">
    <div class="overlay-mf"></div>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div id="testimonial-mf" class="owl-carousel owl-theme">
                    <!-- 无限加人 -->
                    <div class="testimonial-box" th:each="say:${Says}">
                        <div class="author-test">
                            <img th:src="${say.getSayImg()}" alt="" class="rounded-circle b-shadow-a img150px" src="">
                            <span class="author" th:text="${say.getSayName()}"></span>
                            <div th:text="${say.getSayEname()}"></div>
                        </div>
                        <div class="content-test">
                            <p class="description lead" th:text="${say.getSayContent()}">
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 优势点 -->
<section id="service" class="services-mf route">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="title-box text-center">
                    <h3 class="title-a">
                        Godz的工作技能
                    </h3>
                    <p class="subtitle-a">
                        我主要技术能力强项,适用于就业的技术点,单击了解详情
                    </p>
                    <div class="line-mf"></div>
                </div>
            </div>
        </div>
        <a href="/index2#skill" class="btnReturn" style="width: 100%;">了解更多</a>
    </div>

</section>
<!-- 简单联系 -->
<section class="paralax-mf footer-paralax bg-image sect-mt4 route"
         id="Content"
         style="background-image: url(/assets/myIndex/img/bg校长与我.jpg)">
    <div class="overlay-mf"></div>
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="contact-mf">
                    <div id="contact" class="box-shadow-full">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="title-box-2">
                                    <h5 class="title-left">
                                        联系我
                                    </h5>
                                </div>
                                <div>
                                    <div class="myCodeimg">
                                        <img src="/assets/myIndex/img/QQCode.jpg" class="myConimg"  alt=""/>
                                        <text>QQ:1094931523</text>
                                    </div>

                                    <div class="myCodeimg">
                                        <img src="/assets/myIndex/img/WeChatCode.jpg" class="myConimg"  alt=""/>
                                        <text>微信:Z1094931523</text>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="title-box-2 pt-4 pt-md-0">
                                    <h5 class="title-left">
                                        Godz展望未来
                                    </h5>
                                </div>
                                <div class="more-info">
                                    <p class="lead">
                                        10年又10年,好友一个换一个.认识的人也一个换一个.看透了人类自私和贪婪.
                                        只有利用和被利用的时间节点,成长过程只有歧视,嘲讽和痛苦.
                                        不过我不怕,因为我是能成为神的男人.无论有多少苦有少多泪,我依然一往无前.
                                        学会更多的技能和知识体系,不断的询问和了解知识面和知识环境.勇闯新世界.
                                    </p>
                                    <h5 class="title-left">
                                        国际联系
                                    </h5>
                                    <div>
                                        <br>
                                        <a href="/index3">点击访问Godz的:推特(Twitter),脸书(Facebook),领英(LinkIn)</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--底层内容-->
    <nav th:insert="~{public/index :: indexFooter}"></nav>
</section>
<!-- 一键上头 -->
<a href="#" class="back-to-top"><br>顶</a>

<!-- JS文件 -->
<nav th:insert="~{public/index :: indexJs}"></nav>

</body>

</html>
